import React, { Component } from "react";
import Form from "./Form";
import List from "./List";

// 第三步：在react-redux里面解构出connect
// connect是一个函数，这个函数的返回值是一个高阶组件
import { connect } from "react-redux";

// 第四步：connect需要传入两个参数，两个函数
// 将仓库的state的值映射到组件的props里面
const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

// 将dispatch映射到组件的props里面
const mapDispatchToProps = (dispatch) => {
  return {
    add(num) {
      dispatch({ type: "add", num });
    },
    minus() {
      dispatch({ type: "minus" });
    },
  };
};

class App extends Component {
  render() {
    // console.log(this);
    return (
      <>
        <h2>redux计数器</h2>
        <button onClick={this.props.minus}>-</button>
        <span>{this.props.count}</span>
        <button onClick={() => this.props.add(2)}>+</button>
        <button onClick={() => this.props.add(3)}>+</button>

        <hr />
        <Form />
        <List />
      </>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
